<template>
  <view class="pad20">
    <sb-back-icon />
    <view class="success-content flex j-c a-c">
      <view> </view>
      <view class="flex flex-col j-c a-c">
        <span class="font32 suc-text flex a-c j-c">
          <u-icon
            class="marv20"
            :size="40"
            name="checkmark-circle-fill"
          ></u-icon
          >支付成功
        </span>
        <view class="font50 present bold marv30">
          ￥{{ orderData.presentPrice }}
        </view>
        <view v-if="orderData.ticketId" class="c-d original">
          ￥{{ orderData.originalPrice }}
        </view>
        <sb-line class="w100" />
        <view
          class="w100 flex j-s reduce font34 marv10"
          v-if="orderData.ticketId"
        >
          <span>Discount</span>
          <span>￥{{ orderData.reducePrice }}</span>
        </view>
        <sb-line class="w100" />
        <view>收款方信息</view>
        <view
          v-for="(item, index) in payInfo"
          :key="index"
          class="w100 flex j-s font30 marv10"
        >
          <span class="c-d">{{ item.label }}</span>
          <span>{{ item.value }}</span>
        </view>
        <!-- <image src="/static/images/order/order-success.png"></image>

        <span class="font40">
          <u-icon class="marh20" name="checkbox-mark"></u-icon>订单提交成功
        </span> -->
        <sb-line class="w100" />
        <view class="mar20"> 请及时上传支付凭证，点击订单详情去上传 </view>
        <view class="flex j-s">
          <u-button type="error" @click="$go2(`./order-info?id=${id}`)"
            >订单详情</u-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      orderData: {},
      payInfo: [],
    };
  },
  onLoad({ id }) {
    this.id = id;
    this.getPayInfo();
    this.getOrderInfo();
  },
  methods: {
    async getOrderInfo() {
      let { data } = await this.$get("/order/detail", { id: this.id });
      if (data) this.orderData = data;
      console.log(data);
    },
    async getPayInfo() {
      let { data } = await this.$get("/dict/get-pay-module");
      if (data) this.payInfo = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.success-content {
  height: 400rpx;
  border-radius: 20rpx;
  margin-top: 40px;
  image {
    width: 250rpx;
    height: 250rpx;
    border-radius: 50%;
  }
  .suc-text {
    color: #14ca66;
  }
  .present {
    letter-spacing: 5rpx;
  }
  .original {
    text-decoration: line-through;
    letter-spacing: 5rpx;
  }
  .reduce {
    color: $main-color;
  }
}
</style>
